<template>
	<div style='height:100%;' ref='container'>
		<v-chart v-if='value' style='height: 100%;width: 100%;' :options='options'></v-chart>
		<loading v-else></loading>
	</div>
</template>

<script>
	export default {
		props : {
			value : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},
		
		data() {
			return {
				show : false
			}
		},
		
		computed : {
			options () {
                var colorList = ['#7e2aff', '#f35e52', '#2df13a', '#1a81ff']
                console.log(this.value)
				var data = this.value.data
                var categoryNameList = this.value.name
                var frameData = []
				var seriesData = {
                        data : [],
                        type: 'bar',
                        barWidth: 14,
                        label: {
                            normal: {
                                show: true,
                                position: 'insideBottomRight',
                                formatter: '{b}%',
                                distance: 0,
                                offset: [50, 0],
                                color: '#fff',
                                fontSize: 14
                            }
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: 14
                            }
                        }
                }
				data.forEach((v, index) => {
                    frameData.push(100)
					seriesData.data.push({
                        name : v,
                        value : 99 * v / 100,
                        itemStyle : {
                            color : colorList[index]
                        }
                    })

				})

				
				var options = {
                    grid : {
						top : '0px',
						right : '50px',
						bottom : '0px',
						left : '60px'
					},
                    yAxis: [{
                        type: 'category',
                        data: categoryNameList,
                        inverse: true,
                        axisTick: {
                        show: false
                        },
                        axisLabel: {
                        margin: 20,
                        textStyle: {
                            color: '#fff'
                        }
                        },
                        axisLine: {
                        show: false
                        }
                    }],
                    xAxis: [{
                        type: 'value',
                        axisLabel: {
                        show: false
                        },
                        axisLine: {
                        show: false
                        },
                        splitLine: {
                        show: false
                        }
                    }],
                    series: [
                        seriesData, 
                        {
                            type: "bar",
                            barWidth: 14,
                            xAxisIndex: 0,
                            barGap: "-100%",
                            data: frameData,
                            itemStyle: {
                            normal: {
                                    color: "#444a58",
                                    barBorderRadius: 14
                                }
                            },
                            zlevel: -1
                        }
                    ]
                };

				return options
			}
		},

		mounted () {
			this.show = true
		}
	}
</script>